<template>
	<div class="swiper">
		<swiper :options="swiperOption">
		    <swiper-slide v-for="slide in swiperList" :key="slide.id">
		    	<img :src="slide.imgUrl" class="slide_img">
		    </swiper-slide>
		    <div class="swiper-pagination" slot="pagination"></div>
	  	</swiper>	
	</div>
	
</template>
<script type="text/javascript">
	export default{
		props:['swiperList'],
		data(){
			return{
				swiperOption:{
					loop:true,
			        autoplay: true,
			        pagination: {
			           el: '.swiper-pagination',
			        }
				}
			}
		},
		methods:{

		}
	}
</script>
<style lang="less" scoped>
	.swiper{
		overflow: hidden;
		width: 100%;
		height: 0;
		padding-bottom: 20%;
		.slide_img{
			width: 100%;
			height: 100%;
		}
	}
</style>